<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>注册账号</title>
    <link rel="stylesheet" href="static/bootstrap-dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/layui/css/layui.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <img src="static/logo/mianxingzhangben%20(1).svg" style="display: block" class="m-auto" alt="">
        </div>
        <div class="row mt-5">
            <form class="col-sm-12 col-lg-5 mt-sm-5 m-lg-auto" method="post" action="">
                <div class="form-group">
                    <label for="emailAddress">请输入邮箱</label>
                    <input type="text" class="form-control" id="emailAddress" title="Popover title" data-container="body" data-toggle="popover" data-placement="right" data-content="该邮箱已经存在！">
                    <small id="phoneNumberhelp" class="form-text text-muted">我们不会泄露您的隐私</small>
                </div>
                <div class="form-group">
                    <label for="password">请输入新密码</label>
                    <input type="password" class="form-control" id="password">
                </div>
                <div class="form-group">
                    <label for="password">请确认新密码</label>
                    <input type="password2" class="form-control" id="password2">
                </div>
                <div class="form-group" id="captchaBigBox2"  >
                    <div class="row ml-1" style="vertical-align: center">
                        <label for="phoneCaptchaText" style="padding-top: 10px">请输入验证码：</label><input type="text" class="form-control col-3" id="phoneCaptchaText">
                        <button id="sendPhoneNumCaptcha" type="button" class="ml-5 btn btn-primary">点击发送验证码</button>
                    </div>
                </div>
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="isAllowed2">
                    <label class="form-check-label" for="isAllowed2"><a href="">同意用户协议</a></label>
                </div>
                <input type="text" style="display: none" name="opr" value="login">
                <button type="button" style="display: block" class="btn m-auto col-10  btn-primary" id="myRequest2">注册</button>
            </form>
        </div>
    </div>
</body>
<script src="static/bootstrap-dist/js/jquery-3.5.1.js"></script>
<script src="static/bootstrap-dist/js/popper.min.js"></script>
<script src="static/bootstrap-dist/js/bootstrap.js"></script>
<script src="static/layer-v3.3.0/layer-v3.3.0/layer/layer.js"></script>
<script src="static/layui/layui.js"></script>
<script>
    $(function () {
        $("#emailAddress").blur(function () {
            let text=$(this).val();
            if (text!=""){
                userNameVerify();
            }

        });
        $("#myRequest2").click(function () {
            let text=$("#emailAddress").val();
            if (text!=""){
                userNameVerify();
                regist();
            }
        });
        let flag="";
        function regist() {
            $.ajax({
                type:"post",
                url: "user",
                data:{
                    "opr":"add",
                    "email":$("#emailAddress").val(),
                    "tag":"123",
                    "myCaptcha":$("#phoneCaptchaText").val()
                },
                success:function (result) {
                    if (result=="success"){
                        alert("注册成功！");
                        window.location.href="index.jsp";
                    }else {
                        alert("验证码错误！");
                    }
                }
            });
        }
        function send(){
            $("#sendPhoneNumCaptcha").attr("disabled",true);
            let time=60;
            $.ajax({
                type:"post",
                url:"sendCaptcha",
                data:{
                    "opr":"byEmail",
                    "tag":"123",
                    "text":$("#emailAddress").val()
                }
            });
            let interval= setInterval(function () {
                $("#sendPhoneNumCaptcha").text(time+"秒后重新发送！");
                time--;
                if (time==0){
                    $("#sendPhoneNumCaptcha").attr("disabled",false);
                    $("#sendPhoneNumCaptcha").text("点击发送验证码");
                    clearInterval(interval);
                }
            },1000)
        };
        $("#sendPhoneNumCaptcha").click(function () {
            send();
        });
        function  userNameVerify() {
            $.ajax({
                type: "post",
                async:"false",
                url: "user",
                dataType: "text",
                data: {
                    "opr":"userNameVerify",
                    "tag":"123",
                    "userName":$("#username").val(),
                    "userEmail":$("#emailAddress").val()
                },
                success:function (result) {
                    if (result=="ture"){
                        $("#sendPhoneNumCaptcha").attr("disabled",false);
                        $("#myRequest2").attr("disabled",false);
                    }else {
                        $("#sendPhoneNumCaptcha").attr("disabled",true);
                        $("#myRequest2").attr("disabled",true);
                        layer.msg("该账号已经存在！")
                        // $("#emailAddress").popover("show");
                        // setTimeout(function () {
                        //     $("#emailAddress").popover("hide");
                        // },2000);
                    }
                }
            });
        };
    });
</script>
</html>